<template>
  <div style="width:660px">
    <el-button type="primary" icon="el-icon-printer" @click="print" :style="{ display: printButton }"
      style="float: right; margin-left: 5px"></el-button>
    <el-button type="primary" icon="el-icon-plus" @click="showAddDialog" :style="{ display: printButton }"
      style="float: right; margin: 0px"></el-button>
    <div id="printArea">
      <el-descriptions title="A1 Healthcheck Plan" direction="vertical" :column="4" border>
        <el-descriptions-item label="Name">{{ patientName }}</el-descriptions-item>
        <el-descriptions-item label="Age">{{ patientAge }}</el-descriptions-item>
        <el-descriptions-item label="Gender" :span="2">{{ patientGender }}</el-descriptions-item>
        <el-descriptions-item label="建議套餐" :span="24">
          <!--建议套餐-->
          <el-table :data="generalData" style="width: 100%">
            <el-table-column prop="name" label="Name" width="200">
            </el-table-column>
            <el-table-column prop="chineseName" label="Chinese Name" width="170">
            </el-table-column>
            <el-table-column width="25">
              <template slot-scope="scope">
                <el-button v-show="editIcon" @click.native.prevent="showChangePlanDialog(scope.$index, generalData)"
                  type="text" size="small">
                  <i class="el-icon-edit"></i>
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="listPrice" label="Price" width="70">
            </el-table-column>
            <el-table-column prop="discount" label="Off" width="50">
            </el-table-column>
            <el-table-column width="25">
              <template slot-scope="scope">
                <el-button v-show="editIcon" @click.native.prevent="showEditGeneralDialog(scope.$index, generalData)"
                  type="text" size="small">
                  <i class="el-icon-edit"></i>
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="discountedPrice" label="Discounted Price" width="100">
            </el-table-column>
          </el-table>
        </el-descriptions-item>
        <el-descriptions-item label="重點項目" :span="24">
          <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
            <el-table-column type="selection" width="45" v-if="false">
            </el-table-column>
            <el-table-column prop="name" label="Name" width="200">
            </el-table-column>
            <el-table-column prop="chineseName" label="Chinese Name" width="170">
            </el-table-column>
            <el-table-column width="25">
              <template slot-scope="scope">
                <el-button v-show="deleteIcon" @click.native.prevent="deleteRow(scope.$index, tableData)" type="text"
                  size="small">
                  <i class="el-icon-circle-close" style="color: red;"></i>
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="listPrice" label="Price" width="70">
            </el-table-column>
            <el-table-column prop="discount" label="Off" width="50">
            </el-table-column>
            <el-table-column width="25">
              <template slot-scope="scope">
                <el-button v-show="editIcon" @click.native.prevent="editRow(scope.$index, tableData)" type="text"
                  size="small">
                  <i class="el-icon-edit"></i>
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="discountedPrice" label="Discounted Price" width="100">
            </el-table-column>
          </el-table>
        </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-row :span="24">
        <span style="font-size: 14px; color: black; margin-top: 20px; float: right;">
          List Price: $ <span style="text-decoration: line-through;">{{ listPrice }}</span>
        </span>
      </el-row>
      <el-row :style="{ display: printButton }">
        <span style="font-size: 14px; color: black; margin-top: 20px; float: right;">
          Range: $ {{ priceRange - 2000 }}
        </span>
      </el-row>
      <span style="font-size: 14px; color: black; margin-top: 20px; float: right;">
        Discounted Price: $ {{ discountedPrice }}
      </span>
    </div>



    <el-dialog title="Item" :visible.sync="dialogFormVisible" width="30%" size="mini">
      <el-form :model="form">
        <el-form-item label="Item Name:" :label-width="formLabelWidth">
          <el-input v-model="form.name" :disabled="true">
          </el-input>
        </el-form-item>
        <el-form-item label="Chinese Name:" :label-width="formLabelWidth">
          <el-input v-model="form.chineseName" :disabled="true">
          </el-input>
        </el-form-item>
        <el-form-item label="Gender:" :label-width="formLabelWidth">
          <el-input v-model="form.gender" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="Age:" :label-width="formLabelWidth">
          <el-input v-model="form.age" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="List Price:" :label-width="formLabelWidth">
          <el-input v-model="form.listPrice" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="Cost:" :label-width="formLabelWidth">
          <el-input v-model="form.cost" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="Revenue:" :label-width="formLabelWidth">
          <el-input v-model="form.revenue" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="Discount:" :label-width="formLabelWidth">
          <el-input v-model="form.discount" :disabled="false"></el-input>
        </el-form-item>
        <el-form-item label="Discounted Price:" :label-width="formLabelWidth">
          <el-input v-model="calculatedDiscountedPrice" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Close</el-button>
        <el-button type="primary" @click="editDiscount">Confirm</el-button>
      </div>
    </el-dialog>
    <el-dialog title="Add Item" :visible.sync="addDialogVisible" width="50%">
      <el-form :inline="true" :model="addItemSearchForm" class="demo-form-inline" ref="addItemSearchForm">
        <el-form-item label="Name" size="mini">
          <el-input v-model="addItemSearchForm.name" placeholder="Item Name"></el-input>
        </el-form-item>
        <el-form-item label="gender" size="mini">
          <el-select v-model="addItemSearchForm.gender" placeholder="gender">
            <el-option label="F" value="F"></el-option>
            <el-option label="M" value="M"></el-option>
            <el-option label="M/F" value="M/F"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Age" size="mini">
          <el-input v-model="addItemSearchForm.age" placeholder="age"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addItemSearch" size="mini" style="float: right;">Search</el-button>
        </el-form-item>
      </el-form>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>

      <el-table :data="addTableData" style="width: 100%">
        <el-table-column prop="name" label="Name" width="190">
        </el-table-column>
        <el-table-column prop="chineseName" label="Chinese Name" width="170">
        </el-table-column>
        <el-table-column prop="listPrice" label="Price" width="70">
        </el-table-column>
        <el-table-column prop="discount" label="Off" width="50">
        </el-table-column>
        <el-table-column prop="discountedPrice" label="Discounted Price" width="100">
        </el-table-column>
        <el-table-column width="40">
          <template slot-scope="scope">
            <el-button @click.native.prevent="addItem(scope.$index, addTableData)" type="text" size="small">
              <i class="el-icon-plus"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">Close</el-button>
      </span>
    </el-dialog>
    <el-dialog title="Plan" :visible.sync="planDialogFormVisible" width="30%" size="mini">
      <el-form :model="form">
        <el-form-item label="Item Name:" :label-width="formLabelWidth">
          <el-input v-model="form.name" :disabled="true">
          </el-input>
        </el-form-item>
        <el-form-item label="Chinese Name:" :label-width="formLabelWidth">
          <el-input v-model="form.chineseName" :disabled="true">
          </el-input>
        </el-form-item>
        <el-form-item label="Gender:" :label-width="formLabelWidth">
          <el-input v-model="form.gender" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="Age:" :label-width="formLabelWidth">
          <el-input v-model="form.age" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="List Price:" :label-width="formLabelWidth">
          <el-input v-model="form.listPrice" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="Cost:" :label-width="formLabelWidth">
          <el-input v-model="form.cost" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="Revenue:" :label-width="formLabelWidth">
          <el-input v-model="form.revenue" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="Discount:" :label-width="formLabelWidth">
          <el-input v-model="form.discount" :disabled="false"></el-input>
        </el-form-item>
        <el-form-item label="Discounted Price:" :label-width="formLabelWidth">
          <el-input v-model="calculatedDiscountedPrice" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="planDialogFormVisible = false">Close</el-button>
        <el-button type="primary" @click="editGeneralDiscount">Confirm</el-button>
      </div>
    </el-dialog>

    <el-dialog title="Change Plan" :visible.sync="changePlanDialogVisible" width="50%">
      <el-table :data="generalDatas" style="width: 100%">
        <el-table-column prop="name" label="Name" width="190">
        </el-table-column>
        <el-table-column prop="chineseName" label="Chinese Name" width="170">
        </el-table-column>
        <el-table-column prop="listPrice" label="Price" width="70">
        </el-table-column>
        <el-table-column prop="discount" label="Off" width="50">
        </el-table-column>
        <el-table-column prop="discountedPrice" label="Discounted Price" width="100">
        </el-table-column>
        <el-table-column width="40">
          <template slot-scope="scope">
            <el-button @click.native.prevent="changePlan(scope.$index, generalDatas)" type="text" size="small">
              <i class="el-icon-check"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changePlanDialogVisible = false">Close</el-button>
      </span>
    </el-dialog>
  </div>



</template>
<script>
import axios from "axios"
export default {
  data() {
    return {
      baseURL: 'http://47.115.43.236:8181',
      listPrice: 0,
      discountedPrice: 0,
      tableData: [],
      multipleSelection: [],
      patientName: '',
      patientAge: '',
      patientGender: '',
      priceRange: '',
      deleteIcon: true,
      editIcon: true,
      printButton: 'block',
      dialogFormVisible: false,
      planDialogFormVisible: false,
      form: {
        name: '',
        chineseName: '',
        gender: '',
        age: '',
        listPrice: '',
        cost: '',
        revenue: '',
        discount: '',
        discountedPrice: '',
      },
      formLabelWidth: '150px',
      inedx: "",
      addDialogVisible: false,
      addItemSearchForm: {
        name: '',
        gender: '',
        age: '',
        focusTier1: '',
        focusTier2: '',
        listPrice: '',
        cost: '',
        revenue: '',
        discount: '',
        discountedPrice: '',
      },
      addTableData: [],
      size: '',
      currentPage: '',
      total: '',
      generalData: [],
      generalDatas: [],
      changePlanDialogVisible: false,
    }
  },
  created() {
    const _this = this
    // console.log(_this.$route)
    _this.tableData = _this.$route.params.data
    _this.patientName = _this.$route.params.name
    _this.patientAge = _this.$route.params.age
    _this.patientGender = _this.$route.params.gender
    _this.priceRange = _this.$route.params.priceRange
    _this.findAllHpiWithoutGeneral()
    _this.getGeneralData()
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.multipleTable.toggleAllSelection()
    })
  },
  computed: {
    calculatedDiscountedPrice() {
      const _this = this
      return (100 - _this.form.discount) * _this.form.listPrice / 100;
    },
  },
  methods: {
    changePlan(index, generalDatas) {
      const _this = this
      _this.generalData.pop()
      _this.generalData.push(generalDatas[index])
      console.log(generalDatas[index])
      console.log(_this.generalData[0])
      _this.changePlanDialogVisible = false
      _this.handleSelectionChange(this.tableData)
    },
    showChangePlanDialog(index, generalData) {
      const _this = this
      _this.changePlanDialogVisible = true
    },
    editGeneralDiscount(index, generalData) {
      const _this = this
      // console.log("!!!")
      // console.log(_this.tableData)
      _this.generalData[0].discountedPrice = _this.calculatedDiscountedPrice
      _this.generalData[0].discount = _this.form.discount
      _this.planDialogFormVisible = false
      _this.handleSelectionChange(this.tableData)
    },
    showEditGeneralDialog(index, generalData) {
      const _this = this
      const val = generalData[index]
      _this.form = {
        name: val.name,
        chineseName: val.chineseName,
        gender: val.gender,
        age: val.age,
        listPrice: val.listPrice,
        cost: val.cost,
        revenue: val.revenue,
        discount: val.discount,
        discountedPrice: val.discountedPrice,
      }
      _this.planDialogFormVisible = true
    },
    getGeneralData() {
      const _this = this
      axios.get(_this.baseURL + '/hpi/getGeneral', {
        params: {
          age: _this.patientAge,
          gender: _this.patientGender,
        }
      }
      ).then(function (res) {
        res.data.data.sort((a, b) => b.revenue - a.revenue)
        _this.generalDatas = res.data.data
        _this.generalData.push(res.data.data[0])
        _this.handleSelectionChange(_this.tableData)
      })
    },
    handleCurrentChange(currentPage) {
      // console.log('currentPage', currentPage);
      const _this = this
      _this.currentPage = currentPage
      _this.findAllHpiWithoutGeneral()
    },
    addItemSearch() {
      const _this = this
      _this.findAllHpiWithoutGeneral()
    },
    showAddDialog() {
      const _this = this
      _this.addDialogVisible = true
    },
    findAllHpiWithoutGeneral() {
      const _this = this
      axios.get(_this.baseURL + '/hpi/getHpiWithoutGeneral', {
        params: {
          name: _this.addItemSearchForm.name,
          gender: _this.addItemSearchForm.gender,
          age: _this.addItemSearchForm.age,
          current: _this.currentPage,
        }
      }
      ).then(function (res) {
        // console.log(res.data.data)
        _this.size = res.data.data.size
        _this.currentPage = res.data.data.current
        _this.total = res.data.data.total
        // console.log(res.data.data.records)
        res.data.data.records.sort((a, b) => b.revenue - a.revenue);
        _this.addTableData = res.data.data.records
        // _this.addItemSearchForm = {}
        // return res.data.data.records
      })
    },
    editDiscount() {
      const _this = this
      // console.log("!!!")
      // console.log(_this.tableData)
      _this.tableData[_this.index].discountedPrice = _this.calculatedDiscountedPrice
      _this.tableData[_this.index].discount = _this.form.discount
      _this.dialogFormVisible = false
      _this.handleSelectionChange(this.tableData)
    },
    addItem(index, addTableData) {
      const _this = this
      _this.tableData.push(_this.addTableData[index])
      _this.handleSelectionChange(_this.tableData)
    },
    tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
    },
    print() {
      const _this = this
      _this.setNone()
      setTimeout(() => {
        window.print()
        _this.setBlock()
      }, 500)

    },

    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    editRow(index, tableData) {
      const val = tableData[index]
      const _this = this
      _this.index = val.index
      _this.dialogFormVisible = true
      _this.form = {
        name: val.name,
        chineseName: val.chineseName,
        gender: val.gender,
        age: val.age,
        listPrice: val.listPrice,
        cost: val.cost,
        revenue: val.revenue,
        discount: val.discount,
        discountedPrice: val.discountedPrice,
      }
    },

    //计算总价和折后价
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection)
      this.listPrice = 0
      this.discountedPrice = 0
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.listPrice += parseInt(this.multipleSelection[i].listPrice)
        this.discountedPrice += parseInt(this.multipleSelection[i].discountedPrice)
      }
      this.listPrice += parseInt(this.generalData[0].listPrice)
      this.discountedPrice += parseInt(this.generalData[0].discountedPrice)
    },
    //设置打印时元素的隐藏和显示
    setNone() {
      const _this = this
      _this.deleteIcon = false
      _this.editIcon = false
      let app = document.getElementById('app')
      app.style.setProperty('display', 'none')
      _this.printButton = 'none'

    },
    setBlock() {
      const _this = this
      let app = document.getElementById('app')
      app.style.setProperty('display', 'Block')
      _this.printButton = 'block'
      _this.deleteIcon = true
      _this.editIcon = true
    },
  }
}
</script>
<style type="text/css" media="print">
.noprint {
  display: none;
}
</style>
